<template>
  <div>
    <el-button type="primary" :icon="Plus" @click="clickAddSpu" :disabled="!category3Id">添加SPU</el-button>
    <el-table :data="list" border style="margin:20px 0 ">
        <el-table-column label="序号" type="index" width="80" align="center"></el-table-column>
        <el-table-column label="SPU名称" prop="spuName"></el-table-column>
        <el-table-column label="SPU描述" prop="description"></el-table-column>
        <el-table-column label="操作" prop="description">
            <template #default="{row}">
                <el-button type="primary" :icon="Plus" size="small" title="添加SKU"  @click="clickAddSku(row)"></el-button>

                <el-button type="primary" :icon="Edit" size="small" title="修改SPU"
                @click="clickUpdateSpu(row)"
                ></el-button>

                <el-button @click="showSkuList(row)" type="info" :icon="InfoFilled" size="small" title="查看SKU列表"></el-button>

                <el-button type="danger" :icon="Delete" size="small" title="删除SPU"></el-button>    
            </template>
        </el-table-column>
    </el-table>

    <el-pagination
      v-model:current-page="page"
      v-model:page-size="limit"
      :total="total"
      :page-sizes="[3, 6, 9]"
      layout="prev, pager, next, jumper, ->, sizes, total"
      @current-change="getList"
      @size-change="getList"
    />

    <el-dialog :title="`${spu?.spuName} => SKU列表`" v-model="isShowDialog">
      <el-table :data="skuList" v-loading="skuLoading">
        <el-table-column property="skuName" label="名称"></el-table-column>
        <el-table-column property="price" label="价格(元)"></el-table-column>
        <el-table-column property="weight" label="重量(KG)"></el-table-column>
        <el-table-column label="默认图片">
          <template v-slot="{row}">
            <el-image
              style="width: 100px; height: 100px"
              :src="row.skuDefaultImg"
            />
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script lang="ts">
  export default  {
    name:'SpuList'
  }
</script>
<script lang="ts" setup>
// 定义要分发的自定义事件

// defineEmits(['setShowStatus'])  // 无法约束传递的数据结构
import { ShowStatus } from '../types';
import {  ref, watch } from 'vue'
import { Delete, Edit, InfoFilled, Plus } from '@element-plus/icons-vue';
import type { SpuListModel, SpuModel } from '@/api/product/model/spuModel';
import { storeToRefs } from 'pinia';
import { useCategoryStore } from '@/stores/category';
import { getSpuListApi } from '@/api/product/spu';
import { getSkuListBySpuIdApi } from '@/api/product/sku';
import type { SkuListModel } from '@/api/product/model/skuModel';


// 声明定义自定义事件, 返回的是分发事件的函数
const emit = defineEmits<{
(e: 'setShowStatus', value: ShowStatus): void
  (e: 'setSpu', value: SpuModel): void
}>()
// 在TS中分发事件事件
// emit('setShowStatus', ShowStatus.SPU_FORM)
/* SKU列表 start */
const isShowDialog = ref(false)
const spu = ref<SpuModel>()
const skuLoading = ref(false)
const skuList = ref<SkuListModel>([])

// 显示指定spu下的sku列表
const showSkuList = async (row: SpuModel) => {
  isShowDialog.value = true
  spu.value = row
  skuLoading.value = true
  skuList.value = []
  // 发请求
  skuList.value = await getSkuListBySpuIdApi(row.id as number)
  skuLoading.value = false
}
/* SKU列表 end */

// 点击添加spu
const clickAddSpu = () => {
  // 显示Spu修改的Form
  emit('setShowStatus', ShowStatus.SPU_FORM)
  // 传递新创建的spu,  
  emit('setSpu', {
    category3Id: category3Id.value,  // 一定要带上
    description: '',
    spuName: '',
    tmId: undefined,
    spuImageList: [],
    spuSaleAttrList: []
  })
}




// 点击修改spu
const clickUpdateSpu = (row: SpuModel) => {
  // 显示Spu修改的Form
  emit('setShowStatus', ShowStatus.SPU_FORM)
  // 传递选择的spu, 当前就是row
  emit('setSpu', {
    ...row,
    spuImageList:[],
    spuSaleAttrList:[]
  })
}

// 点击添加sku
const clickAddSku = (row: SpuModel) => {
  // 显示Sku添加的Form
  emit('setShowStatus', ShowStatus.SKU_FORM)
  // 传递选择的spu, 当前就是row
  emit('setSpu', {
    ...row,
    spuImageList: [],
    spuSaleAttrList: []
  })
}

/* spu分页列表 start */
const list = ref<SpuListModel>([])
const total = ref(0)
const limit = ref(3)
const page = ref(1)

const {category3Id} = storeToRefs(useCategoryStore())
// 监视category3Id, 请求获取分页列表显示/清除列表
watch(category3Id,(value)=>{
    // 有值，发请求，没有就清除列表
    if(value){
        getList()
    }else{
        list.value = []
        total.value= 0
    }
},{immediate:true}) // 初始化立即执行一次 => 从Form界面返回时能自动获取列表显示

// 请求显示当前分页列表
async function getList() {
    const result = await getSpuListApi({
        page : page.value,
        limit : limit.value,
        category3Id : category3Id.value!  // !指定表达式的值是非空(不是undefined或null)
    })
    list.value = result.records
    total.value = result.total
}
/* spu分页列表 end */


</script>

<style lang="scss" scoped>
  
</style>